<template>
    <div class="landlord">
        <div class="bg">
            <img src="https://pic.tujia.com/upload/festatic/crn/v4landlord.png" alt="">
        </div>
        <div class="hotelInfo">
            <div class="logo">
                <img :src="props.landlordModule.hotelLogo" alt="">
            </div>
            <div class="name">
                <div class="name1">{{ props.landlordModule.hotelName }}</div>
                <div class="nameInfo">
                    <template v-for="(item, index) in props.landlordModule.hotelTags" :key="index">
                        <div class="separate " v-if="index !== 0" :style="{ color: item.tagText.color }">|</div>
                        <div class="text " :style="{ color: item.tagText.color }">{{ item.tagText.text }}</div>
                    </template>
                </div>
            </div>

            <div class="button">
                <span>联系房东</span>
            </div>
        </div>
        <div class="summary">
            <template v-for="(item, index) in props.landlordModule.hotelSummary" :key="index">
                <div class="item">
                    <div class="title">{{ item.title }}</div>
                    <div class="intro">{{ item.introduction }}</div>
                    <div class="tip">{{ item.tip }}</div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    landlordModule: {
        type: Object,
        default: () => ({})
    }
})

// console.log(props.landlordModule)
</script>

<style lang="less" scoped>
.landlord {
    .bg {
        img {
            width: 100%;
        }
    }

    .hotelInfo {
        display: flex;
        justify-content: left;
        align-items: center;

        padding: 16px 0;

        .logo {
            img {
                width: 54px;
                height: 54px;
            }
        }

        .name {
            margin-left: 12px;
            margin-right: 16px;

            .name1 {
                font-weight: 700;
                font-size: 16px;
                color: #333;
            }

            .nameInfo {
                display: flex;
                align-items: center;
                margin-top: 5px;
                font-size: 12px;

                .separate {
                    padding: 0 2px;
                }
            }
        }

        .button {
            width: 72px;
            height: 24px;
            // 垂直水平居中
            line-height: 24px;
            text-align: center;
            background-image: var(--theme-linear-gradient);
            color: #fff;
            font-weight: 600;
            font-size: 12px;
            border-radius: 4px;
        }
    }

    .summary {
        display: flex;
        justify-content: space-around;
        align-items: center;

        padding: 22px 0 20px 0;

        .item {
            display: flex;
            flex-direction: column;
        }

        .title {
            color: #999;
            font-size: 12px;
        }

        .intro {
            color: #333;
            font-weight: 700;
            font-size: 18px;
            margin: 4px 0 2px 0;
        }

        .tip {
            color: #666;
            font-size: 12px;
        }
    }
}
</style>